import {
  Button,
  Form,
  FormItem,
  InputNumber,
  Modal,
  Space,
  Upload
} from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { cinemaApi, jindouLifeApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { useDialog } from '@/hooks'
import jindouLife from '@/router/routes/jindouLife'
import { bus } from '@/utils'
import { handlePrice } from '@/utils/bsshow'

export default defineComponent({
  name: 'JdlSetPrice',
  props: {
    siteId: {
      type: [String, Number],
      required: true
    },
    goodsId: {
      type: [String, Number],
      required: true
    }
  },
  setup(props) {
    const showSetPriceDlg = ref(false)
    const dialogLoading = ref(false)

    const optionSkuItemCur = ref({} as any)
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: 400,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '套餐ID',
            field: 'skuId'
          },
          {
            title: '名称',
            field: 'subTitle'
          },
          {
            title: '库存',
            field: 'itemChannelStock'
          },
          {
            title: '第三方售价',
            field: 'salePrice',
            formatter: ({ cellValue }) => {
              return '￥' + cellValue
            }
          },
          {
            title: '销售价',
            width: 150,
            slots: {
              default: 'salePrice'
            }
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 100
          }
        ],
        proxyConfig: {
          props: {
            result: 'data'
          },
          ajax: {
            query: async () => {
              const data = await jindouLifeApi.getGoodsSkuList(
                props.siteId,
                props.goodsId
              )
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //设置价格
    function handleSetPrice(item) {
      optionSkuItemCur.value.oldPrice = handlePrice(
        item.salesPrice,
        item.salesGoldBean
      )
      optionSkuItemCur.value.id = item.id
      optionSkuItemCur.value.skuId = item.skuId
      optionSkuItemCur.value.salesPrice = item.salesPrice
      optionSkuItemCur.value.salesGoldBean = item.salesGoldBean
      showSetPriceDlg.value = true
    }

    //设置价格确定
    async function dialogConfirm() {
      try {
        dialogLoading.value = true
        await jindouLifeApi.setGoodsSku(optionSkuItemCur.value)
        showSetPriceDlg.value = false
        tableRef.value.refresh()
        bus.emit('refreshJdlGoodsList')
      } finally {
        dialogLoading.value = false
      }
    }

    return {
      tableRef,
      tableConfig,
      showSetPriceDlg,
      optionSkuItemCur,
      dialogLoading,
      handleSetPrice,
      dialogConfirm
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            salePrice: ({ row }) => {
              return (
                <Space>{handlePrice(row.salesPrice, row.salesGoldBean)}</Space>
              )
            },
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleSetPrice(row)}
                >
                  价格设置
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showSetPriceDlg}
          confirmLoading={this.dialogLoading}
          title={'编辑'}
          onOk={this.dialogConfirm}
        >
          <Form labelCol={{ span: 4 }}>
            <FormItem>
              <p>{'当前价格：' + this.optionSkuItemCur.oldPrice}</p>
            </FormItem>
            <FormItem label={'价格'}>
              <InputNumber
                v-model:value={this.optionSkuItemCur.salesPrice}
                placeholder="请输入"
                min={0}
                maxLength={10}
                precision={2}
                style={{ width: '200px' }}
              />
            </FormItem>
            <FormItem label={'金豆'}>
              <InputNumber
                v-model:value={this.optionSkuItemCur.salesGoldBean}
                placeholder="请输入"
                min={0}
                maxLength={10}
                precision={2}
                style={{ width: '200px' }}
              />
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
})
